<template>
    <Card :title="props.title" :desc="props.desc">
        <Echarts :option="config" />
    </Card>
</template>

<script setup>
import _ from 'lodash';
import {ref, watch} from 'vue';
import {registerMap} from 'echarts/core';
import Card from './Card.vue';
import Echarts from './Echarts.vue';

const props = defineProps({
    config: Object,
    title: String,
    desc: String,
    mapData: [Array, Object],
});

const config = ref({});

watch(props, val => {
    if (!_.isEmpty(val.mapData) && !_.isEmpty(val.config)) {
        config.value = val.config;
        registerMap('china', val.mapData);
    }
});

</script>

<style lang="css" scoped></style>
